<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>空气湿度检测</title>

<link href="/iagriculture/css/bootstrap.min.css" rel="stylesheet">
<link href="/iagriculture/font-awesome/css/font-awesome.css"
	rel="stylesheet">
<link href="/iagriculture/css/plugins/jasny/jasny-bootstrap.min.css"
	rel="stylesheet">
<link href="/iagriculture/css/plugins/datapicker/datepicker3.css"
	rel="stylesheet">
<link href="/iagriculture/css/animate.css" rel="stylesheet">
<link href="/iagriculture/css/style.css" rel="stylesheet">


</head>

<body>


	<div id="wrapper">

		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav metismenu" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span> <img alt="image" class="img-circle"
								src="/iagriculture/img/profile_small.jpg" />
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">David Williams</strong>
								</span> <span class="text-muted text-xs block">Art Director <b
										class="caret"></b></span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="profile.html">Profile</a></li>
								<li><a href="contacts.html">Contacts</a></li>
								<li><a href="mailbox.html">Mailbox</a></li>
								<li class="divider"></li>
								<li><a href="login.html">Logout</a></li>
							</ul>
						</div>
						<div class="logo-element">IN+</div>
					</li>
					<li><a href="/iagriculture/index/"><i
							class="fa fa-th-large"></i> <span class="nav-label">个人主页</span></a></li>
					<li><a href="/iagriculture/index/fazhi"><i
							class="fa fa-flask"></i> <span class="nav-label">数据管理</span></a></li>
					<li><a href="/iagriculture/index/shebei"><i
							class="fa fa-flask"></i> <span class="nav-label">设备管理</span></a></li>
					<li><a href="/iagriculture/index/light"><i
							class="fa fa-diamond"></i> <span class="nav-label">光照检测</span></a></li>
					<li><a href="/iagriculture/index/daqiya"><i
							class="fa fa-bar-chart-o"></i> <span class="nav-label">大气压检测</span></a></li>
					<li><a href="/iagriculture/index/shuifen"><i
							class="fa fa-envelope"></i> <span class="nav-label">土壤水分检测
						</span></a></li>
					<li><a href="/iagriculture/index/kqwendu"><i
							class="fa fa-pie-chart"></i> <span class="nav-label">空气温度检测</span>
					</a></li>
					<li class="active"><a href="/iagriculture/index/kqshidu"><i
							class="fa fa-pie-chart"></i> <span class="nav-label">空气湿度检测</span>
					</a></li>

					<li><a href="/iagriculture/index/yewei"><i
							class="fa fa-desktop"></i> <span class="nav-label">液位检测</span> </a></li>
					<li><a href="/iagriculture/index/yushui"><i
							class="fa fa-files-o"></i> <span class="nav-label">雨水检测</span></a></li>
				</ul>

			</div>
		</nav>


		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						<li class="dropdown"><a class="dropdown-toggle count-info"
							data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i>
								<span class="label label-warning">1</span>
						</a>
							<ul class="dropdown-menu dropdown-messages">
								<li>
									<div class="dropdown-messages-box">
										<a href="profile.html" class="pull-left"> <img alt="image"
											class="img-circle" src="/iagriculture/img/a7.jpg">
										</a>
										<div class="media-body">
											<small class="pull-right">46h ago</small> <strong>Mike
												Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
											<small class="text-muted">3 days ago at 7:58 pm -
												10.06.2014</small>
										</div>
									</div>
								</li>
								<li class="divider"></li>
								<li>
									<div class="text-center link-block">
										<a href="mailbox.html"> <i class="fa fa-envelope"></i> <strong>Read
												All Messages</strong>
										</a>
									</div>
								</li>
							</ul></li>
						<li class="dropdown"><a class="dropdown-toggle count-info"
							data-toggle="dropdown" href="#"> <i class="fa fa-bell"></i> <span
								class="label label-primary">1</span>
						</a>
							<ul class="dropdown-menu dropdown-alerts">
								<li><a href="grid_options.html">
										<div>
											<i class="fa fa-upload fa-fw"></i> Server Rebooted <span
												class="pull-right text-muted small">4 minutes ago</span>
										</div>
								</a></li>
								<li class="divider"></li>
								<li>
									<div class="text-center link-block">
										<a href="notifications.html"> <strong>See All
												Alerts</strong> <i class="fa fa-angle-right"></i>
										</a>
									</div>
								</li>
							</ul></li>


						<li><a href="login.html"> <i class="fa fa-sign-out"></i>
								Log out
						</a></li>
					</ul>

				</nav>
			</div>
			<!--start 个人主页 -->
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-9">
					<h2>空气湿度检测</h2>
					<ol class="breadcrumb">
						<li><a href="index.html">主页</a></li>
						<li class="active"><strong>空气湿度检测</strong></li>
					</ol>
				</div>
				<div class="col-lg-3" style="height: 80px"></div>
			</div>
			<!--end 个人主页 -->
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="col-lg-12">

						<div class="ibox">
							<div class="ibox-title">
								<h5>
									Select <small></small>
								</h5>
								<div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
									</a> <a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content">
								<div class="row">
									<div class="col-md-6">
										<label class="font-noraml">选择农场</label>
										<div class="row">
											<select id="select-farm" class="form-control col-md-12"
												oninput="datechange(event)" onchange="datechange(event)"
												name="account">
												<!-- 此处填充类型选择 -->
											</select>
										</div>
									</div>

									<div class="col-md-6">
										<div class="form-group" id="data_2">
											<label class="font-noraml">选择日期</label>
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span><input type="text"
													id="select-datetime" class="form-control"
													placeholder="日/月/年" oninput="datechange(event)"
													onchange="datechange(event)" value="">
											</div>
										</div>

									</div>

								</div>


							</div>

						</div>

					</div>
				</div>


				<div class="row">
					<div class="col-lg-6">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>实时数据</h5>
								<div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
									</a> <a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content" style="height: 300px;">
								<div class="flot-chart">
									<div id="chart-gz-ss" style="width: 100%; height: 300px;"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>历史数据</h5>
								<div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
									</a> <a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content" style="height: 300px;">
								<div class="flot-chart">
									<div id="chart-gz-ls" style="width: 100%; height: 300px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="footer">
				<div class="pull-right">
					10GB of <strong>250GB</strong> Free.
				</div>
				<div>
					<strong>Copyright</strong> Example Company &copy; 2014-2015
				</div>
			</div>

		</div>
	</div>


	<!-- Mainly scripts -->
	<script src="/iagriculture/js/jquery-2.1.1.js"></script>
	<script src="/iagriculture/js/bootstrap.min.js"></script>
	<script src="/iagriculture/js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script
		src="/iagriculture/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<!-- Peity -->
	<script src="/iagriculture/js/plugins/peity/jquery.peity.min.js"></script>
	<script src="/iagriculture/js/demo/peity-demo.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="/iagriculture/js/inspinia.js"></script>
	<script src="/iagriculture/js/plugins/pace/pace.min.js"></script>

	<!-- Data picker -->
	<script
		src="/iagriculture/js/plugins/datapicker/bootstrap-datepicker.js"></script>

	<!-- 引入 echarts.js -->
	<script src="/iagriculture/js/echarts.min.js"></script>

	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var chartss = echarts.init(document.getElementById('chart-gz-ss'));
		var chartls = echarts.init(document.getElementById('chart-gz-ls'));
		function getNowTime() {
			var time = new Date(); // 程序计时的月从0开始取值后+1   
			var m = time.getMonth() + 1;
			var date = time.getDate();
			if (m < 10) {
				m = '0' + m;
			}
			if (time.getDate() < 10) {
				date = '0' + time.getDate();
			}
			var t = time.getFullYear() + '-' + m + '-' + date;
			return t;
		}

		var mindata = 0;
		var maxdata = 0;
		//获取阀值
		$.ajax({
			url : '/iagriculture/datatype/typename',
			data : {
				'typeName' : '空气湿度'
			},
			type : 'POST',
			dataType : "text",
			success : function(d) {
				var rdata = JSON.parse(d);
				//alert(d);
				if (rdata.code == 0) {
					mindata = rdata.data.fzStart;
					maxdata = rdata.data.fzEnd;
				} else {
					alert('请求失败');
				}

			}
		});
		//绘制历史数据表
		function addChartHistoryData(datax, datay, time) {
			var timex = [ time ];
			// 指定图表的配置项和数据
			//历史数据
			var option = {
				title : {
					text : '空气湿度（单位：%）',
					left : '50%',
					textAlign : 'center'
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						lineStyle : {
							color : '#ddd'
						}
					},
					backgroundColor : 'rgba(255,255,255,1)',
					padding : [ 5, 10 ],
					textStyle : {
						color : '#7588E4',
					},
					extraCssText : 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
				},
				legend : {
					right : 0,
					top : 20,
					orient : 'vertical',
					data : [ timex[0] ]
				},
				xAxis : {
					type : 'category',
					data : datax,
					boundaryGap : false,
					splitLine : {
						show : true,
						interval : 'auto',
						lineStyle : {
							color : [ '#D4DFF5' ]
						}
					},
					axisTick : {
						show : false
					},
					axisLine : {
						lineStyle : {
							color : '#609ee9'
						}
					},
					axisLabel : {
						margin : 10,
						textStyle : {
							fontSize : 14
						}
					}
				},
				yAxis : {
					type : 'value',
					splitLine : {
						lineStyle : {
							color : [ '#D4DFF5' ]
						}
					},
					axisTick : {
						show : false
					},
					axisLine : {
						lineStyle : {
							color : '#609ee9'
						}
					},
					axisLabel : {
						margin : 10,
						textStyle : {
							fontSize : 14
						}
					}
				},
				series : [ {
					name : timex[0],
					type : 'line',
					smooth : true,
					showSymbol : false,
					symbol : 'circle',
					symbolSize : 6,
					data : datay,
					areaStyle : {
						normal : {
							color : new echarts.graphic.LinearGradient(0, 0, 0,
									1, [ {
										offset : 0,
										color : 'rgba(199, 237, 250,0.5)'
									}, {
										offset : 1,
										color : 'rgba(199, 237, 250,0.2)'
									} ], false)
						}
					},
					itemStyle : {
						normal : {
							color : '#f7b851'
						}
					},
					lineStyle : {
						normal : {
							width : 3
						}
					},
					markLine : {
						data : [ {
							name : '最小值',
							yAxis : mindata
						}, {
							name : '最大值',
							yAxis : maxdata
						} ]
					}
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			//chartss.setOption(option);
			chartls.setOption(option);
		}

		//绘制实时数据表
		function addChartNowData(datax, datay, time) {
			var timex = [ time ];
			// 指定图表的配置项和数据
			//历史数据
			var option = {
				title : {
					text : '空气湿度（单位：%）',
					left : '50%',
					textAlign : 'center'
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						lineStyle : {
							color : '#ddd'
						}
					},
					backgroundColor : 'rgba(255,255,255,1)',
					padding : [ 5, 10 ],
					textStyle : {
						color : '#7588E4',
					},
					extraCssText : 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
				},
				legend : {
					right : 20,
					top : 20,
					orient : 'vertical',
					data : [ timex[0] ]
				},
				xAxis : {
					type : 'category',
					data : datax,
					boundaryGap : false,
					splitLine : {
						show : true,
						interval : 'auto',
						lineStyle : {
							color : [ '#D4DFF5' ]
						}
					},
					axisTick : {
						show : false
					},
					axisLine : {
						lineStyle : {
							color : '#609ee9'
						}
					},
					axisLabel : {
						margin : 10,
						textStyle : {
							fontSize : 14
						}
					}
				},
				yAxis : {
					type : 'value',
					splitLine : {
						lineStyle : {
							color : [ '#D4DFF5' ]
						}
					},
					axisTick : {
						show : false
					},
					axisLine : {
						lineStyle : {
							color : '#609ee9'
						}
					},
					axisLabel : {
						margin : 10,
						textStyle : {
							fontSize : 14
						}
					}
				},
				series : [ {
					name : timex[0],
					type : 'line',
					smooth : true,
					showSymbol : false,
					symbol : 'circle',
					symbolSize : 6,
					data : datay,
					areaStyle : {
						normal : {
							color : new echarts.graphic.LinearGradient(0, 0, 0,
									1, [ {
										offset : 0,
										color : 'rgba(199, 237, 250,0.5)'
									}, {
										offset : 1,
										color : 'rgba(199, 237, 250,0.2)'
									} ], false)
						}
					},
					itemStyle : {
						normal : {
							color : '#f7b851'
						}
					},
					lineStyle : {
						normal : {
							width : 3
						}
					},
					markLine : {
						data : [ {
							name : '最小值',
							yAxis : mindata
						}, {
							name : '最大值',
							yAxis : maxdata
						} ]
					}
				} ]
			};

			// 使用刚指定的配置项和数据显示图表。
			chartss.setOption(option);
			//chartls.setOption(option);
		}
	</script>



	<script>
		$(document).ready(function() {

			$('#data_2 .input-group.date').datepicker({
				startView : 1,
				todayBtn : "linked",
				keyboardNavigation : false,
				forceParse : false,
				autoclose : true,
				format : "dd/mm/yyyy"
			});

		});

		//装换日期格式
		function fomatNowTime(t) {
			var time = t.split('/');
			return time[2] + '-' + time[1] + '-' + time[0];
		}
	</script>


	<script type="text/javascript">
		$(document).ready(function() {
			getFarm();
			//alert($('#select-farm').val());
			getHistoryData('00', '2018-06-23');
			getSSData('00');
		});
		//请求农场
		function getFarm() {
			var url = '/iagriculture/farm/all';
			var fm = null;
			$.ajax({
				url : url,
				//data:sendData,
				type : 'GET',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						for (var i = 0; i < rdata.data.length; i++) {
							addOptionFarm(rdata.data[i]);
						}
						//alert('农场号：'+rdata.data[0].farmnum);	
						//fm=rdata.data[0].farmnum;
					} else {
						alert('请求失败');
					}

				}
			});
		}
		//填充农场
		function addOptionFarm(obj) {
			var rowoptfarm = '<option value="'+obj.farmnum+'">' + obj.farmname
					+ '</option>'
			$('#select-farm').append(rowoptfarm);
		}

		//请求历史数据
		function getHistoryData(fnum, time) {
			//alert('fnum'+fnum);
			var url = '/iagriculture/data/time';
			var sendData = {
				'farmNum' : fnum,
				'time' : time,
				'typeId' : 5
			};
			$.ajax({
				url : url,
				data : sendData,
				type : 'POST',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						var datax = [];
						var datay = [];
						for (var i = 0; i < rdata.data.length; i++) {
							var t = rdata.data[i].createTime.split(' ');
							datax.push(t[1]);
							datay.push(rdata.data[i].data);
						}
						//alert(datax[rdata.data.length-1]);
						addChartHistoryData(datax, datay, time);
						//alert('请求成功');
					} else {
						alert('请求失败');
					}
				}
			});
		}

		//请求实时数据
		function getSSData(fnum) {
			//alert('fnum'+fnum);
			var url = '/iagriculture/data/time';
			var nowtime = getNowTime();
			//alert(nowtime);
			var sendData = {
				'farmNum' : fnum,
				'time' : nowtime,
				'typeId' : 5
			};
			$.ajax({
				url : url,
				data : sendData,
				type : 'POST',
				dataType : "text",
				success : function(d) {
					var rdata = JSON.parse(d);
					//alert(d);
					if (rdata.code == 0) {
						var datax = [];
						var datay = [];
						for (var i = 0; i < rdata.data.length; i++) {
							var t = rdata.data[i].createTime.split(' ');
							datax.push(t[1]);
							datay.push(rdata.data[i].data);
						}
						//alert(datax[rdata.data.length-1]);
						addChartNowData(datax, datay, nowtime);
					} else {
						alert('请求失败');
					}
				}
			});
		}

		setInterval("getSSData($('#select-farm').val())", 10000);

		//时间   农场选择框改变事件
		function datechange(e) {
			//alert($('#select-farm').val());
			getHistoryData($('#select-farm').val(), fomatNowTime($(
					'#select-datetime').val()));
			getSSData($('#select-farm').val());
		}
	</script>

</body>

</html>
